<template>
	<view class="">
<!--		<roof :title="'我的收藏'" :statusBarHeight="statusBarHeight+'px;'" :isImg="true"></roof>-->
    <z-nav-bar id="nav" bgColor="#ffffff" >
      <view class="img-vessel-wrap">
        <view class="img-vessel-title">收获地址</view>
        <view  class="img-vessel" >
          <image src="http://www.xvopen.com/xiaoV/img1/msg.png" mode=""></image>
          <view class="msg-num">
            0
          </view>
        </view>
      </view>

    </z-nav-bar>
		<view class="shop-box" >

			<view class="shop-item flex-a-center" v-for="(item,index) in shopList" :key="index">
				<view v-if="isEditing" class="single-select-vessel" @tap="onSelect(index)">
					<single-select :selectShow="listSelect.indexOf(index)!=-1" :borderColor="'#999'" :bgColor="'#0080FF'"></single-select>
				</view>

				<navigator class="flex" :url="'/pagesShop/shop_details?storeId='+item.storeId" hover-class="none">
					<image class="shopImg" :src="item.cover" mode=""></image>
					<view class="refer">
						<view class="refer-item1 flex-center-between">
							<text class="text-ellipsis ellip1">{{item.storeName}}</text>
							<image v-if="!isEditing" src="http://www.xvopen.com/xiaoV/img1/heart-full.png" mode=""></image>
						</view>
						<view class="refer-item2 flex-center-between">
							<text class="text-ellipsis ellip2">店铺简介：{{item.introduction}}</text>
						</view>
						<view class="refer-item3">
							<star :starRate="item.star"></star>
							<view class="distance flex-a-center">
								<image class="add" src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>

		<view class="bottom-btn-box">
			<view v-if="isEditing" class="isEditing flex-a-center">
				<view @tap="selectAllcollect">
					<single-select :selectShow="selectAll" :borderColor="'#999'" :bgColor="'#0080FF'"></single-select>
				</view>
				<view class="all">
					全选
				</view>
				<main-button :width="'240rpx'" :color="'#000'" :borderColor="'#222'" :margin="'0 0 0 68rpx'" :bgColor="'#fff'" :isGradient="false" @click="isEditing=!isEditing">编辑</main-button>
				<main-button :width="'240rpx'" :color="'#fff'" :borderColor="'#444'"  :margin="'0 0 0 16rpx'" :bgColor="'#444'" :isGradient="false"  @click="collectCancel">取消收藏</main-button>
			</view>
			<block v-else>
				<main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="isEditing=!isEditing">编辑</main-button>
			</block>
		</view>

		<!-- 提示蒙版层 -->
		<hint v-model:modelValue="isHint" :content="'是否确认取消收藏'" @confirm="hintConfirm" :title="'提示'"></hint>
	</view>
</template>

<script setup>
	import {onShow, onLoad } from '@dcloudio/uni-app';
	// import { useCollectionStoreList } from '@/api/user';
	import {onMounted,ref} from "vue";
	let app = getApp();
	// const statusBarHeight = ref("")
	// statusBarHeight.value = app.globalData.statusBarHeight;
//-----------------------------------data----------------------------
	// 门店
	let	shopList = ref([])

	let isEditing = ref(false) //是否是编辑状态
	let selectAll = ref(false) //是否是全选
	let listSelect = ref([])
	let isHint = ref(false) //是否展示提示框
//---------------------------------------onload----------------------

	onLoad((e)=>{
		getUseCollectionStoreList();
	})


	onShow((e)=>{
		getUseCollectionStoreList();
	})


//-----------------------------------function------------------------
	// 多选
	function onSelect(index) {
		if(listSelect.value.indexOf(index)==-1){
			listSelect.value.push(index)
			console.log(listSelect.value)
		}else{
			listSelect.value.splice(listSelect.value.indexOf(index),1)
			console.log(listSelect.value)
		}
	}
	// 全选
	function selectAllcollect(){
		listSelect.value = []
		if(!selectAll.value){
			shopList.value.forEach((item,index)=>{
				listSelect.value.push(index)
			})
		}
		selectAll.value=!selectAll.value
	}
	// 取消收藏
	function collectCancel(){
		isHint.value = true
	}
	// 确认取消
	function hintConfirm(){
		isHint.value = false
		isEditing.value = false
	}


	function getUseCollectionStoreList(){
		const data = {
		  longitude:123,
		  latitude:456
		}

		useCollectionStoreList(data).then(res => {

			shopList.value = res.data

		}).catch(err => {

		})
	}


</script>

<style>
	page{background-color: #fff;}
</style>
<style lang="scss">
	@import "./style/common.scss";
	.shop-box{
		padding-bottom: 300rpx;
	}
	.isEditing{
		margin-top: 24rpx;
		.all{
			margin-left: 16rpx;
			font-size: 32rpx;
		}
	}
	.single-select-vessel{
		margin-left: 8rpx;
		margin-right: 10rpx;
	}
  .img-vessel-wrap{
    position: relative;
    width: 100%;
    display: flex;
    margin-left: 15rpx;
    justify-content: space-between;
    .img-vessel-title{
      margin-right: 10rpx;
    }
    .img-vessel{
      //margin-left: 15rpx;
      width: 30rpx;
      height: 35rpx;
      //margin: 0 29rpx 0 54rpx;
      position: relative;
      //top:0;
      //right: -45rpx;
      image{
        width: 30rpx;
        height: 35rpx;
      }
      .msg-num{
        width: 25rpx;
        height: 25rpx;
        background-color: #E81414;
        border-radius: 50%;
        position: absolute;
        top: -8rpx;
        right: -13rpx;
        font-size: 22rpx;
        color: #fff;
        text-align: center;
        line-height: 25rpx;
      }
    }
  }

</style>
